<template>
  <div class="fence-container">
    <div ref="leftContainer" class="left">
      <div ref="map" class="map"></div>
      <div class="back_to_center_point">
        <img src="../../../assets/img/back_to_center_point.png" title="回到中心点"
             id="backToCenterPointIcon">
      </div>
      <div class="bm-control">
        <el-select class="editTypeSelectClass" v-model="drawType" placeholder="请选择" size="mini">
          <el-option
            v-for="item in drawTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button style="margin-left: 10px;" ref="startOrEndDrawButton" :type="startOrEndDrawButtonType" size="mini"
                   @click="startOrEndDraw">
          开启绘制
        </el-button>
        <el-button v-if="drawType==='shipline'" style="margin-left: 10px;" ref="clearDrawButton" type="info" size="mini"
                   @click="clearDraw">
          清除
        </el-button>
        <div class="center-title">
          <span>{{ scenic.scenicShortName }}—{{ drawTypeName }}绘制</span>
        </div>
        <el-button class="distanceMeasureButton" ref="distanceMeasureButton" :type="startOrEndDistanceMeasureButtonType"
                   size="mini"
                   @click="startOrEndDistanceMeasure">
          开启测距
        </el-button>
        <!--        <el-checkbox class="drawStatusChangeCheckboxClass" label="开启绘制" border size="small"-->
        <!--                     @change="drawStatusChange"></el-checkbox>-->
        <el-checkbox class="showCoordinatesCheckboxClass" label="显示坐标值" border size="mini"
                     @change="showCoordinates"></el-checkbox>
      </div>
    </div>

    <div ref="rightContainer" class="right">
      <div v-if="drawType==='wharf'">
        <el-card v-for="wharfItem in wharfItemArr" :key="wharfItem.wharfId" class="el_card_class"
                 :body-style="{ width:'380px',padding: '5px' }">
          <div class="show_title">
            <span style="font-size:16px;font-weight: 700">{{ wharfItem.wharfSeqName }}</span>
            <div class="reDrawOrDelete">
              <el-button ref="reDrawWharfButton" type="text" @click="reDrawWharf($event,wharfItem)">重新绘制</el-button>
              <el-button type="text" @click="editWharfItem(wharfItem)">编辑</el-button>
              <el-button type="text" @click="deleteWharfItem(wharfItem)">删除</el-button>
            </div>
          </div>
          <div>
            <span>码头ID：{{ wharfItem.wharfId }}</span>
          </div>
          <div>
            <span>码头编号：{{ wharfItem.wharfCode }}</span>
            <!--            <el-button type="text" size="small " class="modifyButton" @click="modifyWharfCode(wharfItem)">修改-->
            <!--            </el-button>-->
          </div>
          <div>
            <span>码头名称：{{ wharfItem.wharfName }}</span>
            <!--            <el-button type="text" size="small " class="modifyButton">修改</el-button>-->
          </div>
          <div>
            <span>码头坐标：{{ wharfItem.coordinates[0] }}, {{ wharfItem.coordinates[1] }}</span>
            <!--            <el-button type="text" size="small" class="modifyButton" @click="modifyWharfCoordinate(wharfItem)">修改-->
            <!--            </el-button>-->
          </div>
          <div>
            <span>是否固定电子围栏起止点：{{ wharfItem.isTwoFixedPointsNeed === 1 ? '是' : '否' }}</span>
            <!--            <input type="checkbox" />-->

            <!--            <el-switch-->
            <!--              v-model="wharfItem.isTwoFixedPointsNeed"-->
            <!--              active-color="#13ce66"-->
            <!--              inactive-color="gray"-->
            <!--              :active-value="1"-->
            <!--              :inactive-value="0"-->
            <!--              @change="handleIsTwoFixedPointNeedValueChange(wharfItem)"-->
            <!--            >-->
            <!--            </el-switch>-->
          </div>
          <div>
            <span>泊位朝向：{{ wharfItem.heading }}°</span>
            <!--            <el-button type="text" size="small " class="modifyButton" @click="modifyHeading(wharfItem)">修改</el-button>-->
          </div>
          <div>
            <span>电子围栏起止点间直线距离：{{ wharfItem.toFixedPointsDistance }}米</span>
            <!--            <el-button type="text" size="small " class="modifyButton" @click="modifyTwoFixedPointsDistance(wharfItem)">-->
            <!--              修改-->
            <!--            </el-button>-->
          </div>
        </el-card>
      </div>
      <div v-if="drawType==='fence'">
        <el-card v-for="fenceItem in fenceItemArr" :key="fenceItem.fenceId" class="el_card_class"
                 :body-style="{ width:'380px',padding: '5px' }">
          <!--        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png">-->
          <div style="padding: 10px;">
            <div class="show_title">
              <span style="font-size:16px;font-weight: 700">{{ fenceItem.fenceName }}</span>
              <div class="reDrawOrDelete">
                <el-button ref="reDrawFenceButton" type="text" @click="startReEditFence($event,fenceItem)">重新绘制
                </el-button>
                <!--              <el-button ref="reDrawFenceButton" type="text" @click="adjustFenceItem($event,fenceItem)">调整起终点-->
                <!--              </el-button>-->
                <el-button type="text" @click="deleteFenceItem(fenceItem)">删除</el-button>
              </div>
            </div>
            <div>
              <span>电子围栏ID：{{ fenceItem.fenceId }}</span>
            </div>
            <div>
              <span>所属码头：{{ fenceItem.wharfName }}</span>
            </div>
            <div>
              <span>坐标点个数：{{ fenceItem.coordinateNum }}</span>
            </div>
            <div>
              <span>黄区距离(单位：米)：{{ fenceItem.greenDistance }}</span>
              <el-button type="text" size="small " class="modifyButton">修改</el-button>
            </div>
            <div>
              <span>红区距离(单位：米)：{{ fenceItem.yellowDistance }}</span>
              <el-button type="text" size="small " class="modifyButton">修改</el-button>
            </div>


            <!--          <div class="bottom clearfix">-->
            <!--            <time class="time">{{ currentDate }}</time>-->
            <!--            <el-button type="text" class="button">操作按钮</el-button>-->
            <!--          </div>-->
          </div>
        </el-card>
      </div>
      <div v-if="drawType==='shipline'">
        <el-card v-for="shiplineItem in shiplineItemArr" :key="shiplineItem.shiplineId" class="el_card_class"
                 :body-style="{ width:'380px',padding: '5px' }">
          <div class="show_title">
            <span style="font-size:16px;font-weight: 700">{{ shiplineItem.shiplineName }}</span>
            <div class="reDrawOrDelete">
              <el-button ref="reDrawWharfButton" type="text" @click="startReEditShipline($event,shiplineItem)">重新绘制
              </el-button>
              <el-button type="text" @click="deleteShiplineItem(shiplineItem)">删除</el-button>
            </div>
          </div>
          <div>
            <span>航线ID：{{ shiplineItem.shiplineId }}</span>
          </div>
          <div>
            <span>名称：{{ shiplineItem.shiplineName }}</span>
            <el-button type="text" size="small " class="modifyButton">修改</el-button>
          </div>
          <div>
            <span>坐标点个数：{{ shiplineItem.coordinateNum }}</span>
          </div>
          <div>
            <span>航线总长度：{{ shiplineItem.totalLength }} 米</span>
          </div>
        </el-card>
      </div>
    </div>

    <el-dialog
      title="修改码头编号"
      :visible.sync="modifyWharfCodeDialogVisible"
      width="700px"
    >
      <el-form :model="modifyWharfCodeForm" size="small">
        <el-form-item label="码头名称：">
          <el-input type="text" v-model="modifyWharfCodeForm.wharfName" autocomplete="off" style="width: 350px"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="码头编号：">
          <el-input type="text" v-model.trim="modifyWharfCodeForm.wharfCode" autocomplete="off"
                    style="width: 350px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="modifyWharfCoordinateDialogFooter">
        <el-button type="primary" @click="submitModifyWharfCodeForm">确 定</el-button>
        <el-button @click="cancelModifyWharfCode">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="修改泊位朝向"
      :visible.sync="modifyHeadingDialogVisible"
      width="700px"
    >
      <el-form :model="modifyHeadingForm" size="small">
        <el-form-item label="码头名称：">
          <el-input type="text" v-model="modifyHeadingForm.wharfName" autocomplete="off" style="width: 350px"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="泊位朝向：">
          <el-input type="text" v-model.number="modifyHeadingForm.heading" autocomplete="off"
                    style="width: 350px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="modifyWharfCoordinateDialogFooter">
        <el-button type="primary" @click="submitModifyHeadingForm">确 定</el-button>
        <el-button @click="cancelModifyHeading">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改电子围栏起止点间直线距离"
      :visible.sync="modifyTwoFixedPointsDistanceDialogVisible"
      width="700px"
    >
      <el-form :model="modifyTwoFixedPointsDistanceForm" size="small">
        <el-form-item label="码头名称：">
          <el-input type="text" v-model="modifyTwoFixedPointsDistanceForm.wharfName" autocomplete="off"
                    style="width: 350px"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="电子围栏起止点间直线距离：">
          <el-input type="text" v-model.number="modifyTwoFixedPointsDistanceForm.toFixedPointsDistance"
                    autocomplete="off"
                    style="width: 350px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="modifyWharfCoordinateDialogFooter">
        <el-button type="primary" @click="submitModifyTwoFixedPointsDistanceForm">确 定</el-button>
        <el-button @click="cancelModifyTwoFixedPointsDistanceForm">取 消</el-button>
      </div>
    </el-dialog>
    <!--    <el-dialog-->
    <!--      title="选择电子围栏所属码头:"-->
    <!--      :visible.sync="fenceModifyConfirmDialogVisible"-->
    <!--      width="600px"-->
    <!--    >-->
    <!--      <el-form :model="fenceModifyConfirmForm">-->
    <!--        <el-form-item label="所属码头:" prop="wharfId">-->
    <!--          <el-select v-model="fenceModifyConfirmForm.wharfId" placeholder="请选择所属码头" style="width: 300px">-->
    <!--            <el-option-->
    <!--              v-for="item in wharfItemArr"-->
    <!--              :key="item.wharfId"-->
    <!--              :label="item.wharfName"-->
    <!--              :value="item.wharfId"-->
    <!--            ></el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="modifyWharfCoordinateDialogFooter">-->
    <!--        <el-button type="primary" @click="startDrawFence">确 定</el-button>-->
    <!--        <el-button @click="cancelDrawFence">取 消</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->

    <el-dialog
      title="编辑码头:"
      :visible.sync="editWharfDialogVisible"
      width="600px"
    >
      <el-form :model="wharfEditForm" label-width="120px" label-position="right" style="width: 100%">
        <el-form-item label="码头ID：">
          <el-input type="text" v-model="wharfEditForm.wharfId" autocomplete="off" style="width: 350px"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="码头名称：">
          <el-input type="text" v-model="wharfEditForm.wharfName" autocomplete="off" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="码头编号：">
          <el-input type="text" v-model.trim="wharfEditForm.wharfCode" autocomplete="off"
                    style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item required>
          <span slot="label">
                码头坐标
                <el-tooltip placement="top">
                  <div slot="content">
                    此处请输入码头的真实gps坐标。
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
                ：
          </span>
          <el-row type="flex">
            <el-col :span="9">
              <el-form-item prop="lat" required>
                <el-input v-model="wharfEditForm.lat" placeholder="纬度。示例：30.495493"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1" style="margin-left: 5px;">—</el-col>
            <el-col :span="9">
              <el-form-item prop="lon" required>
                <el-input v-model="wharfEditForm.lon" placeholder="经度。示例：114.34014"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="是否固定电子围栏起止点:" label-width="180px">
          <el-switch
            v-model="wharfEditForm.isTwoFixedPointsNeed"
            active-color="#13ce66"
            inactive-color="gray"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="泊位朝向(单位：度)：" label-width="150px">
          <el-input type="text" v-model.number="wharfEditForm.heading" autocomplete="off"
                    style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="电子围栏起止点间直线距离(单位：米)：" label-width="260px">
          <el-input type="text" v-model.number="wharfEditForm.toFixedPointsDistance"
                    autocomplete="off"
                    style="width: 250px"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="modifyWharfCoordinateDialogFooter">
        <el-button type="primary" @click="submitWharfEdit">确 定</el-button>
        <el-button @click="cancelWharfEdit">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {bd09towgs84, convertMC2LL, wgs84tobd09} from "@/utils/gps";
import {
  DistanceMeasure,
  DrawScene,
  MarkerDraw,
  MarkerEdit,
  Measure,
  OperateEventType,
  PolygonDraw,
  PolygonEdit,
  PolylineDraw,
  PolylineEdit
} from "bmap-draw";

import {addWharf, delWharf, listWharf, updateWharf} from "@/api/system/wharf"
import {addFence, delFence, listFence, updateFence} from "@/api/system/fence";
import {addShipline, delShipline, listShipline, updateShipline} from "@/api/system/shipline";

export default {
  name: "FenceEdit",
  data() {
    return {
      drawType: 'wharf', //当前正在绘制的类型。默认为码头，即"wharf"
      drawTypeName: '码头', //当前正在绘制的类型的中文名称。默认为码头
      lastDrawType: 'wharf',
      map: null,
      drawScene: null,
      rectDraw: null,
      circleDraw: null,
      markerDraw: null, //点绘制类对象
      polygonDraw: null, //多边形绘制类对象
      polylineDraw: null, //折线绘制类对象
      measure: null,//距离测量类
      markerEdit: null, //点编辑类对象，用于对点进行二次编辑
      polygonEdit: null, //多边形编辑类对象，用于对多边形进行二次编辑
      polylineEdit: null, //多边形编辑类对象，用于对多边形进行二次编辑
      distanceMeasure: null, //测距对象
      drawing: false, //当前是否正在绘制
      scenic: {
        scenicShortName: ""
      }, //景区信息对象
      select: undefined, //初始化选择类对象
      drawTypeOptions: [
        {
          value: 'wharf',
          label: '码头'
        }, {
          value: 'fence',
          label: '电子围栏'
        }, {
          value: 'shipline',
          label: '自动航线'
        }, {
          value: 'restrictedZone',
          label: '禁航区'
        }],
      currentDate: new Date(),
      polyLayer: undefined, //存储地图上的几何图形的容器对象（也可以使用数组存储）
      selectedOverlay: [], //存储已选择的覆盖物对象或对象数组
      wharfItemArr: [], //码头对象数组
      fenceItemArr: [], //电子围栏对象数组
      shiplineItemArr: [], //自动航线对象数组
      drawingWharfOverlayArr: [], //当前正在绘制中的码头点覆盖物数组
      drawingFenceOverlayArr: [], //当前正在绘制中的电子围栏多边形覆盖物数组
      drawingShiplineOverlayArr: [], //当前正在绘制中的自动航线折线覆盖物数组
      restrictedZoneArr: [], //禁航区对象数组,
      currEditingFenceItem: undefined, //当前正在编辑的电子围栏对象
      currEditingShipline: undefined, //当前正在编辑的自动航线对象
      startOrEndDrawButtonType: "primary",
      startOrEndDistanceMeasureButtonType: "primary",
      isDrawing: false, //当前是否正在绘制中
      fenceTwoFixedPointOverlay: null, //电子围栏两个固定点连线覆盖物
      startPointBdLatLng: [],
      endPointBdLatLng: [],
      twoFixedPoint: [],
      centerPointArr: [], //组合获取地图中心点的点数组
      centerPoint: undefined, //地图中心点
      modifyHeadingDialogVisible: false,
      modifyWharfCodeDialogVisible: false,
      modifyTwoFixedPointsDistanceDialogVisible: false,
      modifyWharfCoordinateForm: {},
      modifyHeadingForm: {},
      modifyWharfCodeForm: {},
      modifyTwoFixedPointsDistanceForm: {},
      editingWharfItem: undefined, //当前正在编辑的码头对象
      isEditingWharf: false, //当前是否正在重新绘制码头
      isEditingShipline: false, //当前是否正在重新绘制自动航线
      isEditingFence: false, //当前是否正在重新绘制电子围栏
      wharfIcon: undefined, //码头图标
      isTwoFixedPointNeed: false, //电子围栏是否需要固定两个点
      wharfOptions: [], //电子围栏所属码头备选数组
      fenceModifyConfirmDialogVisible: false,
      fenceModifyConfirmForm: {},
      editWharfDialogVisible: false, //编辑码头对话框是否显示
      wharfEditForm: {},
    }
  },
  mounted() {
    // console.log("this.$route.params: ", this.$route.params)
    let scenic = this.$route.params && this.$route.params.scenic;

    if (scenic) {
      this.scenic = scenic;
      let scenicId = scenic.scenicId;
      console.log("mounted scenicId: ", scenicId)

      // this.wharfIcon = new BMapGL.Icon("/img/wharf_icon.png", new BMapGL.Size(24, 24), {anchor: new BMapGL.Size(8, -10)});
      this.wharfIcon = new BMapGL.Icon("/img/wharf_icon.png", new BMapGL.Size(24, 24), {anchor: new BMapGL.Size(0, 0)});

      if (scenicId) {
        this.getAllDataAndInitMap(scenicId);
      } else {
        this.$modal.alertWarning("景区id获取失败，无法加载景区地图！");
      }
    } else {
      this.$modal.alertWarning("景区对象信息获取失败，无法加载景区地图！");
    }

  },
  watch: {
    drawType(newVal, oldVal) {
      if (newVal === "wharf") {
        this.drawTypeName = "码头";
      } else if (newVal === "fence") {
        this.drawTypeName = "电子围栏";
      } else if (newVal === "shipline") {
        this.drawTypeName = "自动航线";
      } else if (newVal === "restrictedZone") {
        this.drawTypeName = "禁航区";
      }
    }
  },
  // computed: {
  //   fenceItemCount() {
  //     let itemCount = this.fenceItemArr.length;
  //     console.log("this.$refs.leftContainer: ", this.$refs.leftContainer)
  //     // if (itemCount > 0) {
  //     //   this.$refs.leftContainer.style.width = "calc(100vw - 200px - 400px)";
  //     // } else {
  //     //   this.$refs.leftContainer.style.width = "calc(100vw - 200px)";
  //     // }
  //     console.log("computed fenceItemCount: ", itemCount);
  //     return itemCount;
  //   }
  // },
  // watch: {
  //   fenceItemArr: {
  //     immediate: true, //初始化时让handler调用一下
  //     deep: true,//深度监视
  //     handler(newValue, oldValue) {
  //       console.log('fenceItemArr被修改了', newValue, oldValue)
  //       console.log("watch this.$refs.leftContainer: ", this.$refs.leftContainer)
  //       if (newValue.length > 0) {
  //
  //       } else {
  //
  //       }
  //     }
  //   }
  // },
  methods: {
    getWharfList(scenicId) {
      //移除地图上所有的码头覆盖物。
      this.removeAllWharfOverlay()

      return new Promise((resolve, reject) => {
        listWharf({
          scenicId
        }).then(res => {
          if (res.code === 200) {
            let wharfList = res.data;
            // console.log("getWharfList wharfList: ", wharfList)
            this.wharfItemArr = [];
            if (wharfList && wharfList.length > 0) {
              for (let i = 0; i < wharfList.length; i++) {
                let wharf = wharfList[i];
                let wharfItem = {};
                Object.assign(wharfItem, wharf);

                wharfItem.wharfSeqName = "码头" + (i + 1);

                wharfItem.coordinates = [wharf.lat, wharf.lon] //真实gps坐标

                let translatedPoint = wgs84tobd09(wharf.lon, wharf.lat);
                //先存纬度，再存经度
                wharfItem.bdCoordinates = [translatedPoint[1], translatedPoint[0]] //百度坐标
                let point = new BMapGL.Point(translatedPoint[0], translatedPoint[1]);
                // 创建码头点覆盖物
                let overlay = new BMapGL.Marker(point, {
                  icon: this.wharfIcon
                });
                wharfItem.overlay = overlay;
                this.wharfItemArr.push(wharfItem);

                this.centerPointArr.push(point);
              }
            } else {
              //不要在此处添加默认中心点
              // this.centerPointArr.push(new BMapGL.Point(116.404269, 39.917813)); //如果没有码头则将地图中心点默认设置为北京天安门
            }

            let firstWharf = this.wharfItemArr[0];
            if (firstWharf) {
              this.generateFenceTwoFixedPoint(firstWharf.lat, firstWharf.lon, firstWharf.toFixedPointsDistance, firstWharf.heading);
            }
          }

          resolve();
        }).catch(err => {
          reject(err);
        }).finally(() => {
        })
      })
    },
    /**
     * 根据景区id查询电子围栏列表。
     */
    getFenceList(scenicId) {
      //清除所有电子围栏覆盖物。
      this.removeAllFenceOverlay();

      return new Promise((resolve, reject) => {
        listFence({
          scenicId
        }).then(res => {
          console.log("getFenceList res.data: ", res.data);
          let fenceList = res.data;

          this.fenceItemArr = [];
          if (fenceList && fenceList.length > 0) {
            for (let i = 0; i < fenceList.length; i++) {
              let fence = fenceList[i];
              let coordinates = fence.coordinates; //示例："114 352979,30.500601 114,352332 30502281 114 354668,30.504086 114,358441 30501908 114 355243 30.500383"
              let dotArr = coordinates.split(",");
              let fenceItem = {};
              Object.assign(fenceItem, fence);

              fenceItem.coordinates = []; //用于存储电子围栏的真实坐标的数组
              fenceItem.bdCoordinates = []; //用于存储电子围栏的百度坐标的数组
              let currFenceTranslatedPointArr = [];
              //遍历坐标点
              for (let j = 0; j < dotArr.length / 2; j++) {
                let lat = Number(dotArr[2 * j]); //纬度
                let lng = Number(dotArr[2 * j + 1]); //经度

                fenceItem.coordinates.push(lat);
                fenceItem.coordinates.push(lng);
                let translatedPoint = wgs84tobd09(lng, lat);

                fenceItem.bdCoordinates.push(translatedPoint[1]);
                fenceItem.bdCoordinates.push(translatedPoint[0]);

                let point = new BMapGL.Point(translatedPoint[0], translatedPoint[1])
                currFenceTranslatedPointArr.push(point);

                this.centerPointArr.push(point);
              }
              //创建(但暂不添加)电子围栏多边形覆盖物
              let fencePolygon = new BMapGL.Polygon(currFenceTranslatedPointArr, {
                strokeStyle: 'solid', //覆盖物的样式，solid或dashed
                strokeColor: 'yellow',
                fillColor: '#005a65', //多边形内部的填充色
                strokeWeight: 3,
                strokeOpacity: 0.5
              });
              fenceItem.overlay = fencePolygon;

              this.fenceItemArr.push(fenceItem);
            }
          }

          resolve();
        }).catch(err => {
          reject(err);
        }).finally(() => {
        });
      })
    },
    /**
     * 根据景区id查询自动航线列表。
     */
    getShipLineList(scenicId) {
      //清除所有自动航线覆盖物。
      this.removeAllShiplineOverlay();

      return new Promise((resolve, reject) => {
        listShipline({
          scenicId
        }).then(res => {
          // console.log("listShipline res.data: ", res.data);
          let shipLineList = res.data;

          this.shiplineItemArr = [];
          if (shipLineList && shipLineList.length > 0) {

            let labelStyle = {
              border: "1px solid rgb(204, 204, 204)",
              color: "rgb(0, 0, 0)",
              borderRadius: "5px",
              padding: "1px",
              background: "rgba(252,249,249,0.89)",
              // fontSize: this.labelFontSize + "px",
              fontSize: 12 + "px",
              fontWeight: 400
            }

            for (let i = 0; i < shipLineList.length; i++) {
              let shipline = shipLineList[i];
              let coordinates = shipline.coordinates;
              let dotArr = coordinates.split(",");
              let shiplineItem = {};
              Object.assign(shiplineItem, shipline);

              // shiplineItem.shiplineName = "自动航线" + (i + 1);

              shiplineItem.coordinates = []; //用于存储自动航线的真实坐标的数组
              shiplineItem.bdCoordinates = []; //用于存储自动航线的百度坐标的数组
              let currShiplineTranslatedPointArr = [];
              //遍历坐标点
              for (let j = 0; j < dotArr.length / 2; j++) {
                let lat = Number(dotArr[2 * j]); //纬度
                let lng = Number(dotArr[2 * j + 1]); //经度

                //注意，此处需确保纬度在前，经度在后
                shiplineItem.coordinates.push(lat);
                shiplineItem.coordinates.push(lng);
                let translatedPoint = wgs84tobd09(lng, lat);

                //注意，此处需确保纬度在前，经度在后
                shiplineItem.bdCoordinates.push(translatedPoint[1]);
                shiplineItem.bdCoordinates.push(translatedPoint[0]);

                let point = new BMapGL.Point(translatedPoint[0], translatedPoint[1]);

                if (j === 0) { //当前坐标为此自动航线的起点
                  shiplineItem.startPointLabel = new BMapGL.Label("起点", { // 创建文本标注
                    position: point, // 设置标注的地理位置
                    offset: new BMapGL.Size(-10, 5) // 设置标注的偏移量
                  })
                  shiplineItem.startPointLabel.setStyle(labelStyle);
                }

                if (j === dotArr.length / 2 - 1) { //当前坐标为此自动航线的终点
                  shiplineItem.endPointLabel = new BMapGL.Label("终点", { // 创建文本标注
                    position: point, // 设置标注的地理位置
                    offset: new BMapGL.Size(-10, 5) // 设置标注的偏移量
                  })
                  shiplineItem.endPointLabel.setStyle(labelStyle);
                }

                //注意，此处需确保经度在前，纬度在后
                currShiplineTranslatedPointArr.push(point);

                this.centerPointArr.push(point);
              }
              //创建(但暂不添加)电子围栏多边形覆盖物
              let shiplinePolyline = new BMapGL.Polyline(currShiplineTranslatedPointArr, {
                strokeStyle: 'solid', //覆盖物的样式，solid或dashed
                strokeColor: 'yellow',
                fillColor: '#005a65', //多边形内部的填充色
                strokeWeight: 3,
                strokeOpacity: 0.5
              });
              shiplineItem.overlay = shiplinePolyline;

              this.shiplineItemArr.push(shiplineItem);
            }
          }

          resolve();
        }).catch(err => {
          reject();
        }).finally(() => {
        });
      })
    },

    getAllDataAndInitMap(scenicId) {
      this.centerPointArr = [];

      this.getWharfList(scenicId).then(res => {
        this.getFenceList(scenicId).then(res => {
          this.getShipLineList(scenicId).then(res => {
            //获取自动航线数据结束，开始初始化地图
            this.initMap(scenicId);
          })
        })
      })

    },

    /**
     * 在地图上添加所有覆盖物。
     */
    addAllOverlay() {
      //将所有的码头覆盖物添加到地图上。
      this.addAllWharfOverlay();

      //添加电子围栏多边形覆盖物
      this.addAllFenceOverlay();

      //添加自动航线折线覆盖物
      this.addAllShiplineOverlay();
    },
    /**
     * 移除地图上所有的覆盖物。
     */
    removeAllOverlay() {
      this.removeAllWharfOverlay();
      this.removeAllFenceOverlay();
      this.removeAllShiplineOverlay();
    },
    /**
     * 将所有的码头覆盖物添加到地图上。
     */
    addAllWharfOverlay() {
      if (this.wharfItemArr && this.wharfItemArr.length > 0) {
        for (let i = 0; i < this.wharfItemArr.length; i++) {
          let wharfItem = this.wharfItemArr[i];
          if (this.map) {
            this.map.addOverlay(wharfItem.overlay);
          }
        }
      }
    },
    /**
     * 移除地图上所有的码头覆盖物。
     */
    removeAllWharfOverlay() {
      if (this.wharfItemArr && this.wharfItemArr.length > 0) {
        for (let i = 0; i < this.wharfItemArr.length; i++) {
          let wharfItem = this.wharfItemArr[i];
          if (this.map) {
            this.map.removeOverlay(wharfItem.overlay);
          }
        }
      }

      if (this.fenceTwoFixedPointOverlay) {
        if (this.map) {
          this.map.removeOverlay(this.fenceTwoFixedPointOverlay);
        }
        this.fenceTwoFixedPointOverlay = null;
      }
    },

    /**
     * 将所有电子围栏覆盖物添加到地图上。
     */
    addAllFenceOverlay() {
      if (this.fenceItemArr && this.fenceItemArr.length > 0) {
        for (let i = 0; i < this.fenceItemArr.length; i++) {
          let fenceItem = this.fenceItemArr[i];
          if (this.map) {
            this.map.addOverlay(fenceItem.overlay);
          }
        }
      } else {
        let firstWharfItem = this.wharfItemArr[0];
        if (firstWharfItem) {
          let isTwoFixedPointsNeed = firstWharfItem.isTwoFixedPointsNeed;
          if (isTwoFixedPointsNeed) {
            this.createAndAddFenceTwoFixedPointOverlay(firstWharfItem);
          }
        }
      }
    },
    /**
     * 清除所有电子围栏覆盖物。
     */
    removeAllFenceOverlay() {
      if (this.fenceItemArr && this.fenceItemArr.length > 0) {
        for (let i = 0; i < this.fenceItemArr.length; i++) {
          let fenceItem = this.fenceItemArr[i];
          if (this.map) {
            this.map.removeOverlay(fenceItem.overlay);
          }
        }
      }
    },
    /**
     * 将所有自动航线覆盖物添加到地图上。
     */
    addAllShiplineOverlay() {
      if (this.shiplineItemArr && this.shiplineItemArr.length > 0) {
        for (let i = 0; i < this.shiplineItemArr.length; i++) {
          let shiplineItem = this.shiplineItemArr[i];
          if (this.map) {
            if (shiplineItem.overlay) {
              this.map.addOverlay(shiplineItem.overlay);
            }

            if (shiplineItem.startPointLabel) {
              this.map.addOverlay(shiplineItem.startPointLabel)
            }
            if (shiplineItem.endPointLabel) {
              this.map.addOverlay(shiplineItem.endPointLabel)
            }
          }
        }
      }
    },
    /**
     * 清除所有自动航线覆盖物。
     */
    removeAllShiplineOverlay() {
      if (this.shiplineItemArr && this.shiplineItemArr.length > 0) {
        for (let i = 0; i < this.shiplineItemArr.length; i++) {
          let shiplineItem = this.shiplineItemArr[i];
          if (this.map) {
            this.map.removeOverlay(shiplineItem.overlay);

            if (shiplineItem.startPointLabel) {
              this.map.removeOverlay(shiplineItem.startPointLabel)
            }
            if (shiplineItem.endPointLabel) {
              this.map.removeOverlay(shiplineItem.endPointLabel)
            }
          }
        }
      }
    },

    initMap(scenicId) {
      if (scenicId === 103) { //实测梁子湖景区的普通卫星图模式缩放级别不能大于17.8，否则显示有问题
        //创建百度地图对象
        this.map = new BMapGL.Map(this.$refs.map, {
          //设置地图类型。BMAP_NORMAL_MAP：标准地图，BMAP_SATELLITE_MAP：普通卫星图模式，BMAP_EARTH_MAP：地球模式。
          //请注意，地球模式（BMAP_EARTH_MAP）下能支持的地图交互操作有限 ，如您需要卫星地图支持和标准地图（BMAP_NORMAL_MAP）一致的交互体验，请使用普通卫星图模式（BMAP_SATELLITE_MAP）。
          mapType: BMAP_SATELLITE_MAP,
          minZoom: 0,
          maxZoom: 17.8
        });
      } else {
        //创建百度地图对象
        this.map = new BMapGL.Map(this.$refs.map, {
          //设置地图类型。BMAP_NORMAL_MAP：标准地图，BMAP_SATELLITE_MAP：普通卫星图模式，BMAP_EARTH_MAP：地球模式。
          //请注意，地球模式（BMAP_EARTH_MAP）下能支持的地图交互操作有限 ，如您需要卫星地图支持和标准地图（BMAP_NORMAL_MAP）一致的交互体验，请使用普通卫星图模式（BMAP_SATELLITE_MAP）。
          mapType: BMAP_SATELLITE_MAP,
          minZoom: 0,
          maxZoom: 21
        });
      }

      if (!this.centerPointArr || this.centerPointArr.length === 0) {
        this.centerPointArr = [];
        this.centerPointArr.push(new BMapGL.Point(116.404269, 39.917813)); //如果没有码头则将地图中心点默认设置为北京天安门
      }

      var viewport = this.map.getViewport(this.centerPointArr, {
        zoomFactor: 0
      });

      this.centerPoint = viewport.center;
      let zoom = viewport.zoom;
      if (scenicId === 103) { //103为梁子湖景区
        if (zoom > 17.8) zoom = 17.8
      }
      console.log("initMap centerPoint: ", this.centerPoint, ", zoom: ", zoom)

      this.map.centerAndZoom(this.centerPoint, zoom);
      this.map.enableScrollWheelZoom(true);

      // setTimeout(() => {
      //   this.map.centerAndZoom("遗爱湖",18);
      // }, 5000)

      // 添加比例尺控件
      var scaleCtrl = new BMapGL.ScaleControl({
        offset: new BMapGL.Size(1200, 10)
      });
      this.map.addControl(scaleCtrl);

      // 添加地图缩放控件
      // var zoomCtrl = new BMapGL.ZoomControl({
      //   offset: new BMapGL.Size(540, 15)
      // });
      // this.map.addControl(zoomCtrl);

      //监听地图上鼠标移动事件
      this.map.addEventListener("mousemove", e => {
        // console.log("mousemove: e= ", e)
      });

      //监听地图比例缩放事件
      this.map.addEventListener("zoomend", function () {
        // 监听地图缩放事件
        var curMapZoom = that.map.getZoom();
        console.log("curMapZoom= ", curMapZoom)
      });

      document.querySelector("#backToCenterPointIcon").onclick = () => {
        if (this.map && this.centerPoint) {
          this.map.centerAndZoom(this.centerPoint, 17);
        }
      }

      var that = this;
      //加载本地的地图自定义样式文件
      fetch("../../map/custom_map_config.json")
        .then(res => {
          // console.log("fetch res: ", res)
          if (res.status === 200) {
            //json()是返回的Response对象提供的一个异步方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了。
            // 注意：json()方法只能调用一次，后面再次调用将无法获取到数据。
            var promiseJson = res.json();
            console.log("res promiseJson= ", promiseJson)
            return promiseJson
          } else {
            return {}
          }
        })
        .then(text => {
          // console.log("setMapStyleV2 text: ", text)
          that.map.setMapStyleV2({
            styleJson: text
          })

        });

      this.initDraw();

      //在地图上添加所有覆盖物。
      this.addAllOverlay();
    },
    /**
     * 根据码头id获取码头对象。
     * @param wharfId
     * @return {null}
     */
    getWharfItemByWharfId(wharfId) {
      let targetWharfItem = null;
      if (this.wharfItemArr && this.wharfItemArr.length > 0) {
        for (let i = 0; i < this.wharfItemArr.length; i++) {
          if (wharfId === this.wharfItemArr[i].wharfId) {
            targetWharfItem = this.wharfItemArr[i];
          }
        }
      }

      return targetWharfItem;
    },
    /**
     * 根据码头坐标等数据获取电子围栏中的两个固定点的坐标。
     *
     * @param wharfLat 码头坐标纬度
     * @param wharfLng 码头坐标经度
     * @param distance 电子围栏两个固定点间直线距离的一半
     * @param heading 泊位中船头朝向与正北方向之间的夹角角度(顺时针)
     * @return {*[]}
     */
    generateFenceTwoFixedPoint(wharfLat, wharfLng, distance, heading) {
      console.log("generateFenceTwoFixedPoint wharfLat: ", wharfLat, ", wharfLng: ", wharfLng, ", distance: ", distance, ", heading: ", heading)

      if (!wharfLat || !wharfLng || !distance || !heading) return

      let intermediateLatLng = this.getLatLng_PDH(wharfLat, wharfLng, 20, heading + 180 >= 360 ? heading + 180 - 360 : heading + 180);
      let startLatLng = this.getLatLng_PDH(intermediateLatLng[0], intermediateLatLng[1], distance, heading + 90 >= 360 ? heading + 90 - 360 : heading + 90);
      let endLatLng = this.getLatLng_PDH(intermediateLatLng[0], intermediateLatLng[1], distance, heading - 90 <= 0 ? heading - 90 + 360 : heading - 90);

      let startLat = Math.round(startLatLng[0] * 1000000) / 1000000;
      let startLng = Math.round(startLatLng[1] * 1000000) / 1000000;
      let endLat = Math.round(endLatLng[0] * 1000000) / 1000000;
      let endLng = Math.round(endLatLng[1] * 1000000) / 1000000;

      let translatedStartLatLng = wgs84tobd09(startLng, startLat);
      let translatedEndLatLng = wgs84tobd09(endLng, endLat);

      let startBdLat = Math.round(translatedStartLatLng[1] * 1000000) / 1000000;
      let startBdLng = Math.round(translatedStartLatLng[0] * 1000000) / 1000000;
      let endBdLat = Math.round(translatedEndLatLng[1] * 1000000) / 1000000;
      let endBdLng = Math.round(translatedEndLatLng[0] * 1000000) / 1000000;

      let twoFixedPoint = [];
      twoFixedPoint.push({
        lat: startLat,
        lng: startLng,
        bdLat: startBdLat,
        bdLng: startBdLng
      })
      twoFixedPoint.push({
        lat: endLat,
        lng: endLng,
        bdLat: endBdLat,
        bdLng: endBdLng
      })
      this.twoFixedPoint = twoFixedPoint;
      console.log("generateFenceTwoFixedPoint twoFixedPoint: ", twoFixedPoint)
      return twoFixedPoint;
    },
    /**
     * 创建并添加电子围栏中的两个固定点组成的多边形覆盖物。
     * 备注：
     *   1，这两个点非常重要，绘制的景区电子围栏中必须包含这两个点，这两个点的坐标值也不能有任何变动；
     *   2，这两个点组成的覆盖物本身应该是直线(即折线覆盖物)，但为了方便后续以这两个点为基础进行电子围栏(多边形)的绘制，因此这两个点也是以多边形类别进行绘制的；
     */
    createAndAddFenceTwoFixedPointOverlay(wharfItem) {
      if (!wharfItem) return
      let lat = wharfItem.lat;
      let lon = wharfItem.lon;
      let toFixedPointsDistance = wharfItem.toFixedPointsDistance;
      let heading = wharfItem.heading;

      if (!lat || !lon || !toFixedPointsDistance || !heading) return;

      let twoFixedPoint = this.generateFenceTwoFixedPoint(lat, lon, toFixedPointsDistance / 2, heading);
      if (!twoFixedPoint) return;

      //绘制两固定点连线的覆盖物。注意：此处要以多边形样式而不是折线样式来创建覆盖物，因为后续可能会以这两个点的连线为基础绘制电子围栏，而电子围栏覆盖物必须是多边形样式。
      // let polyline = new BMapGL.Polyline([
      this.fenceTwoFixedPointOverlay = new BMapGL.Polygon([
        new BMapGL.Point(twoFixedPoint[0].bdLng, twoFixedPoint[0].bdLat),
        new BMapGL.Point(twoFixedPoint[1].bdLng, twoFixedPoint[1].bdLat)
      ], {
        // strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5
        strokeStyle: 'solid', //覆盖物的样式，solid或dashed
        strokeColor: 'yellow',
        fillColor: '#005a65', //多边形内部的填充色
        strokeWeight: 3,
        strokeOpacity: 0.5
      });

      this.addFenceTwoFixedPointOverlay();
    },
    addFenceTwoFixedPointOverlay() {
      if (this.map && this.fenceTwoFixedPointOverlay) {
        this.map.addOverlay(this.fenceTwoFixedPointOverlay);
      }
    },
    removeFenceTwoFixedPointOverlay() {
      if (this.map && this.fenceTwoFixedPointOverlay) {
        this.map.removeOverlay(this.fenceTwoFixedPointOverlay);
      }
    },
    initDraw() {
      //创建场景类对象，作为鼠标绘制的管理类，用于管理全局的事件监听、覆盖物存取、获取当前交互对象等。在使用其他绘制功能前，需要先实例一个 DrawScene 类。
      this.drawScene = new DrawScene(this.map
        , {
          isOpen: false, //默认是否开启绘制状态
          noLimit: true, //是否无限制绘制，默认为false, 限制绘制
          enableSnap: false, //是否开启可吸附，默认false
          snapDistance: 10, //吸附范围，默认10
          //点线面图形样式配置
          baseOpts: {
            strokeStyle: 'solid',
            strokeColor: 'yellow',
            // fillColor: 'rgba(102,192,172,0.1)', //多边形内部的填充色
            fillColor: '#005a65', //多边形内部的填充色
            strokeWeight: 3,
            strokeOpacity: 0.5
          },
          //提示文字样式配置
          labelOptions: {
            borderRadius: '2px',
            background: '#b5d3fb',
            border: '1px solid #b5d3fb',
            color: '#333',
            fontSize: '12px',
            letterSpacing: '0',
            padding: '5px'
          },
          //吸附点样式配置
          // matchOverlay: {}
        }
      );

      //点击编辑完成的对勾、取消编辑等时刻均会回调该方法
      this.drawScene.addEventListener(OperateEventType.COMPLETE, e => {
        console.log("this.drawScene 操作完成,e: ", e)
        // console.log("this.drawScene.instances: ", this.drawScene.instances);
        // console.log("this.drawScene.selectInstance: ", this.drawScene.selectInstance);
        this.isDrawing = false;

        if (e.target) {
          let overlay = e.target.overlay;
          if (this.drawType === "wharf") { //当前正在绘制的是码头
            this.drawingWharfOverlayArr.push(overlay);
          } else if (this.drawType === "fence") { //当前正在绘制的是电子围栏
            this.drawingFenceOverlayArr.push(overlay);
          } else if (this.drawType === "shipline") { //当前正在绘制的是自动航线
            this.drawingShiplineOverlayArr.push(overlay);
          }
        }
      })

      //点击取消编辑的叉叉等时刻均会回调该方法
      this.drawScene.addEventListener(OperateEventType.CANCEL, e => {
        console.log("this.drawScene 操作取消,e: ", e)

        this.isDrawing = false;
      })

      // 初始化选择类对象。
      // this.select = new Select(this.drawScene, {
      //   // type: DrawingType.DRAWING_POINT // 选择点覆盖物
      //   // type: DrawingType.DRAWING_MARKER //选择标记物
      //   type: DrawingType.DRAWING_POLYGON // 选择点覆盖物
      // });

      // 创建存储地图上的几何图形的容器（也可以使用数组存储）
      // this.polyLayer = new BMapGL.GeoJSONLayer('poly', {
      //   polygonStyle: function (properties) {
      //     return {
      //       strokeStyle: 'solid',
      //       strokeColor: 'yellow',
      //       fillColor: '#005a65', //多边形内部的填充色
      //       strokeWeight: 3,
      //       strokeOpacity: 0.5
      //     }
      //   }
      // });
      // this.map.addGeoJSONLayer(this.polyLayer);
      // this.drawScene.attachSnapSource(this.polyLayer.overlayData);

      //创建点绘制类。
      this.markerDraw = new MarkerDraw(this.drawScene, {
        isOpen: false, //默认不开启点绘制状态
        isSeries: false,//是否连续绘制
        enableDragging: true,
        baseOpts: {}
      });

      //创建多边形绘制类对象，继承绘制类抽象基类DrawBase，提供绘制多边形能力。
      let polygonDrawOptions = {
        hideTip: false, // 是否隐藏绘制提示，默认为true
        isOpen: false, //默认是否开启绘制状态
        baseOpts: {
          strokeStyle: 'solid',
          strokeColor: 'yellow',
          fillColor: '#005a65', //多边形内部的填充色
          strokeWeight: 3,
          strokeOpacity: 0.5
        }
      }
      this.polygonDraw = new PolygonDraw(this.drawScene, polygonDrawOptions);

      //创建折线绘制类对象，继承绘制类抽象基类DrawBase，提供绘制折线的能力。
      let polylineDrawOptions = {
        hideTip: false, // 是否隐藏绘制提示，默认为true
        isOpen: false, //默认是否开启绘制状态
        baseOpts: {
          strokeStyle: 'solid',
          strokeColor: 'yellow',
          fillColor: '#005a65', //多边形内部的填充色
          strokeWeight: 3,
          strokeOpacity: 0.5
        },
      }
      this.polylineDraw = new PolylineDraw(this.drawScene, polylineDrawOptions);
      // this.polylineDraw = new DistanceMeasure(this.drawScene, polylineDrawOptions);

      // 监听测量结果
      // this.polylineDraw.addEventListener('measure-length-end', e => {
      //   console.log('measure-length-end e: ', e);
      // });

      //创建距离测量类
      this.measure = new Measure(this.drawScene);

      //创建折线编辑类对象。
      this.polylineEdit = new PolylineEdit(this.drawScene);

      this.polylineEdit.addEventListener('operate-ok', (e) => {
        console.log('polylineEdit operate-ok e: ', e);
        console.log('polylineEdit operate-ok', e.target);
        let newOverlay = e.target.overlay;

        let coordinatesArr = []
        let bdCoordinatesArr = []
        for (let i = 0; i < newOverlay.points.length; i++) {
          let point = newOverlay.points[i];
          console.log("polylineEdit point: ", point);
          let lngLat = convertMC2LL({
            x: point.lng,
            y: point.lat
          })
          let bdLng = lngLat[0];
          let bdLat = lngLat[1];

          //先存放纬度再存放经度
          bdCoordinatesArr.push(bdLat);
          bdCoordinatesArr.push(bdLng);

          let translatedPoint = bd09towgs84(bdLng, bdLat);
          let translatedLng = Math.round(translatedPoint[0] * 1000000) / 1000000;
          let translatedLat = Math.round(translatedPoint[1] * 1000000) / 1000000;

          //先存放纬度再存放经度
          coordinatesArr.push(translatedLat);
          coordinatesArr.push(translatedLng);
        }

        this.handleShiplineReDraw(newOverlay, coordinatesArr);
      })

      //创建点编辑类对象。
      this.markerEdit = new MarkerEdit(this.drawScene);
      // this.markerEdit.setIcon(this.wharfIcon);
      // 绑定点编辑操作事件
      this.markerEdit.addEventListener('operate-ok', e => {
        console.log('operate-ok', e.target);
        let newPoint = e.target.overlay.point;

        //注意：此回调事件在每次移动点覆盖物后都会触发一次，即使当前的编辑任务并未结束也会触发，
        // 所以此处需要通过判断this.isEditingWharf的值来确认用户是否已经点击完成绘制的按钮结束绘制，以确保如下代码只能在结束绘制后调用一次。
        if (!this.isEditingWharf) {
          //百度墨卡托坐标(bd09mc)转百度经纬度坐标(bd09ll)
          let lngLat = convertMC2LL({
            x: newPoint.lng,
            y: newPoint.lat
          })
          let bdLng = lngLat[0];
          let bdLat = lngLat[1];

          let translatedPoint = bd09towgs84(bdLng, bdLat);
          let translatedLng = Math.round(translatedPoint[0] * 1000000) / 1000000;
          let translatedLat = Math.round(translatedPoint[1] * 1000000) / 1000000;
          console.log("markerEdit operate-ok translatedPoint: ", translatedPoint)
          console.log("markerEdit operate-ok this.editingWharfItem: ", this.editingWharfItem)

          let wharfId = this.editingWharfItem.wharfId;

          //更新数据库中当前码头信息
          let newWharf = {
            wharfId: wharfId,
            scenicId: this.editingWharfItem.scenicId,
            wharfCode: this.editingWharfItem.wharfCode,
            lat: translatedLat,
            lon: translatedLng,
            heading: this.editingWharfItem.heading,
            toFixedPointsDistance: this.editingWharfItem.toFixedPointsDistance
          }
          updateWharf(newWharf).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess("码头重新绘制成功！")

              this.getAllDataAndInitMap(this.editingWharfItem.scenicId)
            } else {
              this.$modal.msgError("码头重新绘制失败！")
            }
          }).catch(err => {
            this.$modal.msgError("码头重新绘制失败！")
          })

        }

      });

      this.markerEdit.addEventListener('operate-cancel', e => {
        console.log('operate-cancel', e.target);
      });


      //创建多边形编辑类对象。
      this.polygonEdit = new PolygonEdit(this.drawScene);

      // 绑定多边形编辑操作事件，目前多边形编辑只对应电子围栏的绘制或编辑。
      // 编辑过程中的变化回调(该事件回调会在绘制过程中持续多次触发)。
      this.polygonEdit.addEventListener('operate-change', (e) => {
        console.log('operate-change', e.target);
      });
      this.polygonEdit.addEventListener('operate-ok', (e) => {
        console.log('operate-ok e: ', e);
        console.log('operate-ok', e.target);
        let newOverlay = e.target.overlay;

        this.isEditingFence = false;

        let drawType = this.drawType;
        console.log("draw complete: drawType: ", drawType)
        console.log("draw complete: this.wharfItemArr: ", this.wharfItemArr)
        console.log("draw complete: this.fenceItemArr: ", this.fenceItemArr)

        console.log("this.twoFixedPoint: ", this.twoFixedPoint);

        let isTwoFixedPointsNeed = false;
        let firstWharfItem = this.wharfItemArr[0];
        if (firstWharfItem) {
          isTwoFixedPointsNeed = firstWharfItem.isTwoFixedPointsNeed;
        }

        let bdCoordinatesArr = []
        let coordinatesArr = []
        let isStartPointBdLatOk;
        let isStartPointBdLngOk;
        let isEndPointBdLatOk;
        let isEndPointBdLngOk;
        for (let i = 0; i < newOverlay.points.length - 1; i++) {
          //注意：下面这个循环方式会导致取到的点的顺序在顺时针与逆时针之间循环变化，对船端的电子围栏绘制有重大影响，需舍去该方式
          //注意：这里需要将原坐标反过来，因为原坐标顺序为逆时针，船端电子围栏坐标顺序要求必须是顺时针
          // for (let i = newOverlay.points.length - 1; i >= 1; i--) {
          let point = newOverlay.points[i];
          console.log("point: ", point);
          let lngLat = convertMC2LL({
            x: point.lng,
            y: point.lat
          })
          let bdLng = lngLat[0];
          let bdLat = lngLat[1];

          // if (Math.abs(bdLat - this.twoFixedPoint[0].bdLat) < 0.000001) {
          //   isStartPointBdLatOk = true;
          // }
          //
          // if (Math.abs(bdLng - this.twoFixedPoint[0].bdLng) < 0.000001) {
          //   isStartPointBdLngOk = true;
          // }
          //
          // if (Math.abs(bdLat - this.twoFixedPoint[1].bdLat) < 0.000001) {
          //   isEndPointBdLatOk = true;
          // }
          //
          // if (Math.abs(bdLng - this.twoFixedPoint[1].bdLng) < 0.000001) {
          //   isEndPointBdLngOk = true;
          // }

          bdCoordinatesArr.push(bdLat);
          bdCoordinatesArr.push(bdLng);

          let translatedPoint = bd09towgs84(bdLng, bdLat);
          let translatedLng = Math.round(translatedPoint[0] * 1000000) / 1000000;
          let translatedLat = Math.round(translatedPoint[1] * 1000000) / 1000000;

          //先存放纬度再存放经度
          coordinatesArr.push(translatedLat);
          coordinatesArr.push(translatedLng);

        }

        console.log("bdCoordinatesArr[0]: ", bdCoordinatesArr[0])
        console.log("bdCoordinatesArr[1]: ", bdCoordinatesArr[1])

        console.log("bdCoordinatesArr[bdCoordinatesArr.length-2]: ", bdCoordinatesArr[bdCoordinatesArr.length - 2])
        console.log("bdCoordinatesArr[bdCoordinatesArr.length-1]: ", bdCoordinatesArr[bdCoordinatesArr.length - 1])

        console.log("bdCoordinatesArr: ", bdCoordinatesArr)

        if (drawType === "wharf") {
        } else if (drawType === "shipline") {
        } else if (drawType === "fence") {
          // if (isTwoFixedPointsNeed) {
          //   if (isStartPointBdLatOk && isStartPointBdLngOk && isEndPointBdLatOk && isEndPointBdLngOk) {
          //     console.log("当前绘制所选点包含了两固定点，符合要求！")
          //     if (coordinatesArr.length < 6) {
          //       console.log("当前绘制电子围栏所选点不符合要求，点数少于3！")
          //       this.$modal.msgWarning("绘制的电子围栏坐标点数少于3，不符合要求，请重新绘制！")
          //       this.map.removeOverlay(newOverlay);
          //       this.addFenceTwoFixedPointOverlay();
          //     } else {
          //       //判断是添加电子围栏还是重新绘制电子围栏
          //       let fenceItemArrLength = this.fenceItemArr.length;
          //       if (fenceItemArrLength > 0) {
          //         this.handleFenceReDraw(newOverlay, coordinatesArr);
          //       } else {
          //         this.handleFenceFirstDraw(newOverlay, coordinatesArr);
          //       }
          //     }
          //   } else {
          //     console.log("当前绘制所选点不包含两固定点，不符合要求！")
          //     if (drawType === "fence") {
          //       this.$modal.msgWarning("当前电子围栏绘制点不包含两固定点，不符合要求，请重新绘制！");
          //       this.map.removeOverlay(newOverlay);
          //       this.addAllFenceOverlay();
          //     } else {
          //       this.$modal.msgWarning("当前电子围栏绘制点不包含两固定点，不符合要求，请重新绘制！")
          //       this.map.removeOverlay(newOverlay);
          //       this.addFenceTwoFixedPointOverlay();
          //     }
          //   }
          // } else {
          //   if (coordinatesArr.length < 6) {
          //     console.log("当前绘制电子围栏所选点不符合要求，点数少于3！")
          //     this.$modal.msgWarning("绘制的电子围栏坐标点数少于3，不符合要求，请重新绘制！")
          //     this.map.removeOverlay(newOverlay);
          //     this.addFenceTwoFixedPointOverlay();
          //   } else {
          //     //判断是添加电子围栏还是重新绘制电子围栏
          //     let fenceItemArrLength = this.fenceItemArr.length;
          //     if (fenceItemArrLength > 0) {
          //       this.handleFenceReDraw(newOverlay, coordinatesArr);
          //     } else {
          //       this.handleFenceFirstDraw(newOverlay, coordinatesArr);
          //     }
          //   }
          // }

          if (coordinatesArr.length < 6) {
            console.log("当前绘制电子围栏所选点不符合要求，点数少于3！")
            this.$modal.msgWarning("绘制的电子围栏坐标点数少于3，不符合要求，请重新绘制！")
            this.map.removeOverlay(newOverlay);
            this.addFenceTwoFixedPointOverlay();
          } else {
            //判断是添加电子围栏还是重新绘制电子围栏
            let fenceItemArrLength = this.fenceItemArr.length;
            if (fenceItemArrLength > 0) {
              this.handleFenceReDraw(newOverlay, coordinatesArr);
            } else {
              this.handleFenceFirstDraw(newOverlay, coordinatesArr);
            }
          }
        }

      });
      this.polygonEdit.addEventListener('operate-cancel', (e) => {
        console.log('operate-cancel', e.target);
        this.isEditingFence = false;
        this.$modal.msg("取消绘制！")
      });

      //创建测距类对象
      this.distanceMeasure = new DistanceMeasure(this.drawScene, {
        isSeries: false, // 不连续测量
        unit: 'metric'
      });

      // 监听测距结果
      this.distanceMeasure.addEventListener('measure-length-end', e => {
        console.log('measure-end', e);

        this.$refs.distanceMeasureButton.$el.innerText = "开启测距";
        this.startOrEndDistanceMeasureButtonType = "primary"
      });

      //默认关闭测距
      this.distanceMeasure.close();
    },
    /**
     * 首次添加电子围栏。
     */
    handleFenceFirstDraw(newOverlay, coordinatesArr) {
      let defaultFenceName = "电子围栏" + (this.fenceItemArr.length + 1);

      //当前电子围栏所属的码头id
      let wharfId = this.wharfItemArr[0].wharfId;

      let requestData = {
        scenicId: this.scenic.scenicId,
        fenceName: defaultFenceName,
        wharfId: wharfId,
        status: this.scenic.status,
        coordinates: coordinatesArr.join(","),
        greenDistance: 10,
        yellowDistance: 10
      }

      console.log("handleFenceFirstDraw requestData: ", requestData)

      addFence(requestData).then(res => {
        this.$modal.msgSuccess("添加电子围栏成功！");

        //先移除重新编辑的newOverlay，再重新获取电子围栏数据并绘制到地图上
        if (this.map && newOverlay) {
          this.map.removeOverlay(newOverlay);
        } else {
          console.log("this.map或newOverlay为空，无法移除newOverlay.")
        }

        this.getFenceList(this.scenic.scenicId).then(res => {
          this.addAllFenceOverlay();
        });
      });
    },
    /**
     * 重新绘制电子围栏。
     * @param newOverlay
     * @param coordinatesArr
     */
    handleFenceReDraw(newOverlay, coordinatesArr) {
      let requestData = {
        fenceId: this.currEditingFenceItem.fenceId,
        scenicId: this.scenic.scenicId,
        wharfId: this.currEditingFenceItem.wharfId,
        status: this.scenic.status,
        coordinates: coordinatesArr.join(","),
        greenDistance: 10,
        yellowDistance: 10
      }

      console.log("handleFenceReDraw requestData: ", requestData)

      updateFence(requestData).then(res => {
        console.log("handleFenceReDraw res: ", res)
        this.$modal.msgSuccess("重新绘制电子围栏成功！");

        //先移除重新编辑的newOverlay，再重新获取电子围栏数据并绘制到地图上
        if (this.map && newOverlay) {
          this.map.removeOverlay(newOverlay);
        } else {
          console.log("this.map或newOverlay为空，无法移除newOverlay.")
        }

        this.getFenceList(this.scenic.scenicId).then(res => {
          this.addAllFenceOverlay();
        });

      });
    },
    /**
     * 处理自动航线重绘。
     */
    handleShiplineReDraw(newOverlay, coordinatesArr) {

      let shiplineLength = this.measure.getLength(newOverlay, {
        // unit: 'metric',
        showlabel: false,
        offset: new BMapGL.Size(50, 50)
      })
      let totalLength = (shiplineLength * 1000).toFixed(2);
      console.log("totalLength: ", totalLength)

      let requestData = {
        scenicId: this.currEditingShipline.scenicId,
        shiplineId: this.currEditingShipline.shiplineId,
        coordinates: coordinatesArr.join(","),
        totalLength
      }

      console.log("handleShiplineReDraw requestData: ", requestData)

      updateShipline(requestData).then(res => {
        console.log("updateShipline res: ", res)
        this.$modal.msgSuccess("重新绘制自动航线成功！");

        //先移除重新编辑的newOverlay，再重新获取自动航线数据并绘制到地图上
        this.map.removeOverlay(newOverlay);
        this.getShipLineList(this.scenic.scenicId).then(res => {
          this.addAllShiplineOverlay();
        });
      });
    },

    getNewWharfCode() {
      let newWharfCode = "A";
      let currLength = this.wharfItemArr.length;
      switch (currLength) {
        case 0:
          newWharfCode = "A";
          break
        case 1:
          newWharfCode = "B";
          break
        case 2:
          newWharfCode = "C";
          break
        case 3:
          newWharfCode = "D";
          break
        case 4:
          newWharfCode = "E";
          break
      }

      return newWharfCode;
    },

    getNewWharfName() {
      let newWharfName = "";
      let currLength = this.wharfItemArr.length;
      switch (currLength) {
        case 0:
          newWharfName = "一号";
          break
        case 1:
          newWharfName = "二号";
          break
        case 2:
          newWharfName = "三号";
          break
        case 3:
          newWharfName = "四号";
          break
        case 4:
          newWharfName = "五号";
          break
      }

      return newWharfName + "码头";
    },

    /**
     * 开启绘制。
     * @param e
     */
    startOrEndDraw(e) {
      let drawType = this.drawType;
      if (drawType === "wharf") {
        if (e.target.innerText === "开启绘制") {
          console.log("点击开启绘制自动航线按钮！")
          //先判断当前是否已经存在码头
          if (this.wharfItemArr && this.wharfItemArr.length > 0) {
            this.$modal.msgWarning("单个景区目前只允许创建一个码头！")
            return;
          }

          e.target.innerText = "结束绘制";
          this.startOrEndDrawButtonType = "success"
          this.isDrawing = true;

          this.drawingWharfOverlayArr = [];

          this.markerDraw.open(() => {
            console.log("开启码头绘制!")
          })
        } else if (e.target.innerText === "结束绘制") {
          console.log("点击结束绘制码头按钮！")

          //判断本次绘制的码头个数是否大于1
          if (this.drawingWharfOverlayArr.length > 1) {
            this.$modal.msgWarning("单次绘制只允许绘制一个码头！请清除当前所有绘制后重新进行绘制！")
            return;
          }

          e.target.innerText = "开启绘制";
          this.startOrEndDrawButtonType = "primary"
          this.isDrawing = false;

          this.markerDraw.close(() => {
            console.log("结束码头的绘制!")

            //如果本次绘制的码头数量为0则无需更新数据库
            if (this.drawingWharfOverlayArr.length > 0) {
              let firstWharfOverlay = this.drawingWharfOverlayArr[0];
              console.log("firstWharfOverlay: ", firstWharfOverlay)

              let bdLat = firstWharfOverlay.latLng.lat;
              let bdLng = firstWharfOverlay.latLng.lng;

              let translatedPoint = bd09towgs84(bdLng, bdLat);
              let translatedLng = Math.round(translatedPoint[0] * 1000000) / 1000000;
              let translatedLat = Math.round(translatedPoint[1] * 1000000) / 1000000;

              let scenicId = this.scenic.scenicId;
              let wharfCode = this.getNewWharfCode();
              let wharfName = this.getNewWharfName();
              let distance = 100; //新的码头设置电子围栏起止点直线距离为100米
              let heading = 91; //新的码头设置默认泊位朝向为91度

              let twoFixedPoint = this.generateFenceTwoFixedPoint(translatedLat, translatedLng, distance, heading);

              if (twoFixedPoint) {
                let toFixedPointsCoordinatesArr = [];
                let toFixedPointsBdCoordinatesArr = [];

                toFixedPointsCoordinatesArr.push(twoFixedPoint[0].lat);
                toFixedPointsCoordinatesArr.push(twoFixedPoint[0].lng);
                toFixedPointsCoordinatesArr.push(twoFixedPoint[1].lat);
                toFixedPointsCoordinatesArr.push(twoFixedPoint[1].lng);

                toFixedPointsBdCoordinatesArr.push(twoFixedPoint[0].bdLat);
                toFixedPointsBdCoordinatesArr.push(twoFixedPoint[0].bdLng);
                toFixedPointsBdCoordinatesArr.push(twoFixedPoint[1].bdLat);
                toFixedPointsBdCoordinatesArr.push(twoFixedPoint[1].bdLng);

                let newWharf = {
                  scenicId: scenicId,
                  wharfCode: wharfCode,
                  wharfName: wharfName,
                  lat: translatedLat,
                  lon: translatedLng,
                  heading: 91,
                  toFixedPointsDistance: 100,
                  isTwoFixedPointsNeed: 1, //电子围栏是否需要设置固定起止点。0：不需要，1：需要。默认为需要设置。
                  toFixedPointsCoordinates: toFixedPointsCoordinatesArr.join(","),
                  toFixedPointsBdCoordinates: toFixedPointsBdCoordinatesArr.join(","),
                }

                console.log("newWharf: ", newWharf)
                addWharf(newWharf).then(res => {
                  if (res.code === 200) {
                    this.$modal.msgSuccess("添加码头成功！");
                  }
                }).catch(err => {

                }).finally(() => {
                  this.getAllDataAndInitMap(scenicId);
                })

              } else {
                this.$modal.msgWarning("生成电子围栏起止点失败，当前码头绘制不成功！")
              }
            }
          })
        }
      } else if (drawType === "fence") {
        if (e.target.innerText === "开启绘制") {
          if (!this.wharfItemArr || this.wharfItemArr.length === 0) {
            this.$modal.msgWarning("请先绘制码头再绘制电子围栏！")
            return;
          }

          // let firstWharfItem = this.wharfItemArr[0];
          // this.fenceModifyConfirmForm.wharfId = firstWharfItem.wharfId;
          // this.fenceModifyConfirmDialogVisible = true;

          if (this.fenceItemArr && this.fenceItemArr.length > 0) {
            this.$modal.msgWarning("单个景区目前只允许创建一个电子围栏！")
            return;
          }

          //电子围栏是以两个固定点为基础进行编辑
          if (this.fenceTwoFixedPointOverlay) {
            this.isEditingFence = true;
            this.polygonEdit.open(this.fenceTwoFixedPointOverlay);
          } else { //如果没有电子围栏的两个固定点则随意绘制
            e.target.innerText = "结束绘制";
            this.startOrEndDrawButtonType = "success"
            this.isDrawing = true;

            this.polygonDraw.open(() => {
              console.log("开启电子围栏绘制!")
            })
          }
        } else if (e.target.innerText === "结束绘制") {
          if (this.isDrawing) {
            this.$modal.msgWarning("本次绘制还未完成，请完成后再点击结束按钮！")
            return;
          }

          //判断本次绘制的电子围栏个数是否大于1
          if (this.drawingFenceOverlayArr.length > 1) {
            this.$modal.msgWarning("单次绘制只允许绘制一个电子围栏！请清除当前所有绘制后重新进行绘制！")
            return;
          }

          e.target.innerText = "开启绘制";
          this.startOrEndDrawButtonType = "primary"
          this.isDrawing = false;

          this.polygonDraw.close(() => {
            console.log("结束电子围栏绘制, this.drawingFenceOverlayArr: ", this.drawingFenceOverlayArr)

            if (this.drawingFenceOverlayArr.length === 1) {
              let newOverlay = this.drawingFenceOverlayArr[0];

              let bdCoordinatesArr = []
              let coordinatesArr = []
              // for (let i = 0; i < newOverlay.points.length - 1; i++) {
              //注意：这里需要将原坐标反过来，因为原坐标顺序为逆时针，船端电子围栏坐标顺序要求必须是顺时针
              for (let i = newOverlay.points.length - 1; i >= 1; i--) {
                let point = newOverlay.points[i];
                console.log("point: ", point);
                let lngLat = convertMC2LL({
                  x: point.lng,
                  y: point.lat
                })
                let bdLng = lngLat[0];
                let bdLat = lngLat[1];

                bdCoordinatesArr.push(bdLat);
                bdCoordinatesArr.push(bdLng);

                let translatedPoint = bd09towgs84(bdLng, bdLat);
                let translatedLng = Math.round(translatedPoint[0] * 1000000) / 1000000;
                let translatedLat = Math.round(translatedPoint[1] * 1000000) / 1000000;

                //先存放纬度再存放经度
                coordinatesArr.push(translatedLat);
                coordinatesArr.push(translatedLng);
              }

              let defaultFenceName = "电子围栏" + (this.fenceItemArr.length + 1);

              //当前电子围栏所属的码头id
              let wharfId = this.wharfItemArr[0].wharfId;

              let requestData = {
                scenicId: this.scenic.scenicId,
                fenceName: defaultFenceName,
                // wharfId: this.scenic.wharfId,
                wharfId: wharfId,
                status: this.scenic.status,
                coordinates: coordinatesArr.join(","),
                greenDistance: 10,
                yellowDistance: 10
              }

              console.log("addFence requestData: ", requestData)

              addFence(requestData).then(res => {
                this.$modal.msgSuccess("绘制电子围栏成功！");

                //先移除重新编辑的newOverlay，再重新获取电子围栏数据并绘制到地图上
                if (this.map && newOverlay) {
                  this.map.removeOverlay(newOverlay);
                } else {
                  console.log("this.map或newOverlay为空，无法移除newOverlay.")
                }

                this.drawingFenceOverlayArr = [];

                this.getFenceList(this.scenic.scenicId).then(res => {
                  this.addAllFenceOverlay();
                });
              });
            }

          })
        }

      } else if (drawType === "shipline") {
        if (e.target.innerText === "开启绘制") {
          console.log("点击开启绘制自动航线按钮！")
          //先判断当前是否已经存在自动航线
          // if (this.shiplineItemArr && this.shiplineItemArr.length > 0) {
          //   this.$modal.msgWarning("单个景区目前只允许创建一条自动航线！")
          //   return;
          // }

          e.target.innerText = "结束绘制";
          this.startOrEndDrawButtonType = "success"

          this.drawingShiplineOverlayArr = [];

          this.polylineDraw.open(() => {
            console.log("开启自动航线绘制!")
            this.isDrawing = true;
          })

        } else if (e.target.innerText === "结束绘制") {
          console.log("点击结束绘制自动航线按钮！")

          if (this.isDrawing) {
            this.$modal.msgWarning("本次绘制还未完成，请完成后再点击结束按钮！")
            return;
          }

          //判断本次绘制的自动航线条数是否大于1
          if (this.drawingShiplineOverlayArr.length > 1) {
            this.$modal.msgWarning("单次绘制只允许绘制一条自动航线！请清除当前所有绘制后重新进行绘制！")
            return;
          }

          e.target.innerText = "开启绘制";
          this.startOrEndDrawButtonType = "primary"
          this.isDrawing = false;

          this.polylineDraw.close(() => {
            console.log("结束自动航线绘制!")

            console.log("this.drawingShiplineOverlayArr: ", this.drawingShiplineOverlayArr);

            let coordinatesArr = [];
            //如果本次绘制的电子围栏数量为0则无需更新数据库
            if (this.drawingShiplineOverlayArr.length > 0) {
              let shiplineOverlay = this.drawingShiplineOverlayArr[0];

              let shiplineLength = this.measure.getLength(shiplineOverlay, {
                // unit: 'metric',
                showlabel: false,
                offset: new BMapGL.Size(50, 50)
              })
              let totalLength = (shiplineLength * 1000).toFixed(2);
              console.log("totalLength: ", totalLength)

              for (let j = 0; j < shiplineOverlay.points.length; j++) {
                let point = shiplineOverlay.points[j];
                console.log("point: ", point);
                let lngLat = convertMC2LL({
                  x: point.lng,
                  y: point.lat
                })
                let bdLng = lngLat[0];
                let bdLat = lngLat[1];

                let translatedPoint = bd09towgs84(bdLng, bdLat);
                let translatedLng = Math.round(translatedPoint[0] * 1000000) / 1000000;
                let translatedLat = Math.round(translatedPoint[1] * 1000000) / 1000000;

                //注意，此处需先写入纬度，再写入经度。
                coordinatesArr.push(translatedLat);
                coordinatesArr.push(translatedLng);
              }

              let defaultShiplineName = "自动航线" + (this.shiplineItemArr.length + 1);

              let requestData = {
                scenicId: this.scenic.scenicId,
                shiplineName: defaultShiplineName,
                coordinates: coordinatesArr.join(","),
                totalLength
              }

              addShipline(requestData).then(res => {
                this.$modal.msgSuccess("添加自动航线成功！");

                //(非常重要)先从地图上将this.drawingShiplineOverlayArr中所有的自动航线覆盖物都移除掉，再重新从服务器拉取自动航线数据并重新绘制到地图上
                for (let i = 0; i < this.drawingShiplineOverlayArr.length; i++) {
                  let shiplineOverlay = this.drawingShiplineOverlayArr[i];
                  if (this.map) {
                    this.map.removeOverlay(shiplineOverlay);
                  }
                }

                //注意此处需将this.drawingShiplineOverlayArr清空，因为自动航线的绘制此时已结束。
                this.drawingShiplineOverlayArr = [];

                this.getShipLineList(this.scenic.scenicId).then(res => {
                  this.addAllShiplineOverlay();
                });
              });

            }

          })
        }
      }
    },

    submitWharfEdit() {
      this.editWharfDialogVisible = false;
      console.log("this.wharfEditForm: ", this.wharfEditForm)

      //更新数据库中当前码头信息
      updateWharf(this.wharfEditForm).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("码头编辑成功！")

          this.getAllDataAndInitMap(this.wharfEditForm.scenicId)
        } else {
          this.$modal.msgError("码头编辑失败！")
        }
      }).catch(err => {
        this.$modal.msgError("码头编辑失败！")
      })

    },
    cancelWharfEdit() {
      this.editWharfDialogVisible = false;
    },

    startDrawFence() {
      this.fenceModifyConfirmDialogVisible = false;

      console.log("this.fenceModifyConfirmForm: ", this.fenceModifyConfirmForm);

      let wharfId = this.fenceModifyConfirmForm.wharfId;

      if (this.fenceItemArr && this.fenceItemArr.length > 0) {
        this.$modal.msgWarning("单个景区目前只允许创建一个电子围栏！")
        return;
      }

      //电子围栏是以两个固定点为基础进行编辑
      if (this.fenceTwoFixedPointOverlay) {
        this.polygonEdit.open(this.fenceTwoFixedPointOverlay);
      } else { //如果没有电子围栏的两个固定点则随意绘制
        // this.polygonEdit.open();
      }
    },
    cancelDrawFence() {
      this.fenceModifyConfirmDialogVisible = false;
    },

    clearDraw() {
      console.log("清除绘制");

      this.drawScene.clearData()

      let drawType = this.drawType;
      if (drawType === "wharf") {
      } else if (drawType === "fence") {
        this.drawingFenceOverlayArr = [];
      } else if (drawType === "shipline") {
        this.drawingShiplineOverlayArr = [];
      }
    },
    /**
     * 开启或结束自动航线的绘制。
     * @param e
     */
    startOrEndShiplineDraw(e) {

    },
    /**
     * 开启或结束绘制。
     */
    // startOrEndDraw(e) {
    //   // console.log("startOrEndDraw e: ", e)
    //   // console.log("startOrEndDraw this.$refs.startOrEndDrawButton: ", this.$refs.startOrEndDrawButton)
    //   // console.log("startOrEndDraw this.$refs.startOrEndDrawButton.$el.type: ", this.$refs.startOrEndDrawButton.$el.type)
    //
    //   const drawType = this.drawType
    //
    //   if (e.target.innerText === "开启绘制") {
    //     e.target.innerText = "结束绘制";
    //     this.startOrEndDrawButtonType = "success"
    //     console.log("点击开启绘制按钮！")
    //     this.isDrawing = true;
    //
    //     if (drawType === "fence") { //绘制电子围栏(多边形)
    //       this.drawingFenceOverlayArr = [];
    //       this.polygonDraw.open(() => {
    //         console.log("开启电子围栏绘制!")
    //
    //       })
    //     } else if (drawType === "restrictedZone") { //绘制禁航区(多边形)
    //       this.polygonDraw.open(() => {
    //         console.log("开启禁航区绘制!")
    //
    //       })
    //     }
    //
    //   } else if (e.target.innerText === "结束绘制") {
    //     console.log("点击结束绘制按钮！")
    //
    //     // if (this.isDrawing) {
    //     //   this.$modal.msgWarning("当前的绘制未保存，无法结束绘制！")
    //     //   return;
    //     // }
    //
    //     e.target.innerText = "开启绘制";
    //     this.startOrEndDrawButtonType = "primary"
    //     this.isDrawing = false;
    //
    //     if (drawType === "fence") { //绘制多边形
    //       // this.$modal.confirm("是否确认保存当前已绘制的电子围栏?").then(() => {
    //       //   console.log("确认保存")
    //       // }).catch(() => {
    //       //   console.log("取消保存")
    //       //
    //       //
    //       // })
    //       // this.polygonDraw.close(() => {
    //       //   console.log("结束电子围栏绘制!")
    //       //
    //       // })
    //       this.polygonDraw.closeAll()
    //
    //       if (this.drawScene) {
    //         this.drawScene.removeOverlay(this.polygonDraw); //移除电子围栏多边形绘制
    //       }
    //
    //       console.log("结束电子围栏绘制!!!")
    //       console.log("this.drawingFenceOverlayArr: ", this.drawingFenceOverlayArr);
    //
    //
    //       let coordinatesArr = [];
    //       for (let i = 0; i < this.drawingFenceOverlayArr.length; i++) {
    //         let fenceOverlay = this.drawingFenceOverlayArr[i];
    //         for (let j = 0; j < fenceOverlay.points.length - 1; j++) {
    //           let point = fenceOverlay.points[j];
    //           console.log("point: ", point);
    //           let lngLat = convertMC2LL({
    //             x: point.lng,
    //             y: point.lat
    //           })
    //           let bdLng = lngLat[0];
    //           let bdLat = lngLat[1];
    //
    //           let translatedPoint = bd09towgs84(bdLng, bdLat);
    //           let translatedLng = Math.round(translatedPoint[0] * 1000000) / 1000000;
    //           let translatedLat = Math.round(translatedPoint[1] * 1000000) / 1000000;
    //
    //           //注意，此处需先写入纬度，再写入经度。
    //           coordinatesArr.push(translatedLat);
    //           coordinatesArr.push(translatedLng);
    //         }
    //
    //         let requestData = {
    //           scenicId: this.scenic.scenicId,
    //           wharfId: this.scenic.wharfId,
    //           status: this.scenic.status,
    //           coordinates: coordinatesArr.join(","),
    //           greenDistance: 10,
    //           yellowDistance: 10
    //         }
    //
    //         console.log("addFence requestData: ", requestData)
    //
    //         addFence(requestData).then(res => {
    //           this.$modal.msgSuccess("添加电子围栏成功！");
    //
    //           //(非常重要)从地图上将this.drawingFenceOverlayArr中所有的电子围栏覆盖物都移除掉
    //           for (let i = 0; i < this.drawingFenceOverlayArr.length; i++) {
    //             let fenceOverlay = this.drawingFenceOverlayArr[i];
    //             if (this.map) {
    //               this.map.removeOverlay(fenceOverlay);
    //             }
    //           }
    //
    //           this.getFenceList(this.scenic.scenicId);
    //         });
    //       }
    //
    //
    //     } else if (drawType === "restrictedZone") { //绘制禁航区(多边形)
    //       this.polygonDraw.close(() => {
    //         console.log("结束禁航区绘制!")
    //
    //       })
    //     }
    //   }
    // },

    showCoordinates(val) {
      if (val) { //选择框被选中
        this.coordinateLabelArr = [];
        //创建并添加电子围栏所有点的坐标文本标签
        this.fenceItemArr.forEach(fence => {
          for (let i = 0; i < fence.coordinateNum; i++) {
            let bdLng = fence.bdCoordinates[2 * i + 1];
            let bdLat = fence.bdCoordinates[2 * i];
            let lng = fence.coordinates[2 * i + 1];
            let lat = fence.coordinates[2 * i];
            let point = new BMapGL.Point(bdLng, bdLat);
            let content = `[${lat},${lng}]`;
            let label = new BMapGL.Label(content, {       // 创建文本标注
              position: point,                          // 设置标注的地理位置
              offset: new BMapGL.Size(-50, 5)           // 设置标注的偏移量
            })

            this.coordinateLabelArr.push(label);
            this.map.addOverlay(label);                        // 将标注添加到地图中
          }
        })

        //创建并添加自动航线所有点的坐标文本标签
        this.shiplineItemArr.forEach(shiplineItem => {
          for (let i = 0; i < shiplineItem.coordinateNum; i++) {
            let bdLng = shiplineItem.bdCoordinates[2 * i + 1];
            let bdLat = shiplineItem.bdCoordinates[2 * i];
            let lng = shiplineItem.coordinates[2 * i + 1];
            let lat = shiplineItem.coordinates[2 * i];
            let point = new BMapGL.Point(bdLng, bdLat);
            let content = `[${lat},${lng}]`;
            let label = new BMapGL.Label(content, {       // 创建文本标注
              position: point,                          // 设置标注的地理位置
              offset: new BMapGL.Size(-50, 5)           // 设置标注的偏移量
            })

            this.coordinateLabelArr.push(label);
            this.map.addOverlay(label);                        // 将标注添加到地图中
          }
        })
      } else { //选择框被取消选中
        this.coordinateLabelArr.forEach(label => {
          this.map.removeOverlay(label);
        })
      }
    },
    adjustFenceItem(e, fenceItem) {

    },
    /**
     * 重新绘制码头。
     * @param e
     * @param wharfItem
     */
    reDrawWharf(e, wharfItem) {
      console.log("reDrawWharf wharfItem: ", wharfItem)

      if (e.target.innerText === "重新绘制") {
        this.$modal.confirm("重新绘制码头可能会先删除已有的电子围栏，是否确认重新绘制？").then(() => {
          console.log("确认重新绘制码头")

          let overlay = wharfItem.overlay;
          if (this.markerEdit && overlay) {
            e.target.innerText = "结束绘制";

            this.isEditingWharf = true;
            this.editingWharfItem = wharfItem;

            this.removeFenceTwoFixedPointOverlay();
            this.markerEdit.open(overlay);
          }

        }).catch(() => {
          console.log("取消重新绘制码头")
        })
      } else if (e.target.innerText === "结束绘制") {
        e.target.innerText = "重新绘制";
        this.isEditingWharf = false;

        if (this.markerEdit) {
          this.markerEdit.close();
        }
      }


    },
    /**
     * 重新绘制电子围栏。
     * @param fenceItem
     */
    startReEditFence(e, fenceItem) {
      // console.log("startReEditFence e: ", e)

      this.currEditingFenceItem = fenceItem;
      // this.currEditingFenceItem = _.cloneDeep(fence); //此处需使用深拷贝

      let overlay = fenceItem.overlay;
      // let overlay = _.cloneDeep(fenceItem.overlay); //注意：此处千万不能使用lodash深拷贝，之前实测此处使用深拷贝后在多边形重绘时如果缩放或拖动地图会导致绘制终止，
      // 这个问题导致自己排查了好久！！！;
      if (overlay && this.polygonEdit) {
        this.isEditingFence = true;
        this.polygonEdit.open(overlay, null, () => {
          console.log("开启电子围栏重新绘制！")
        });
      }
    },
    startReEditShipline(e, shiplineItem) {
      this.currEditingShipline = shiplineItem;

      let overlay = shiplineItem.overlay;
      if (overlay && this.polylineEdit) {
        this.polylineEdit.open(overlay);
      }
    },
    editWharfItem(wharfItem) {
      this.$modal.confirm("修改码头可能会先删除已有的电子围栏，是否确认修改？").then(res => {

        this.wharfEditForm = {
          wharfId: wharfItem.wharfId,
          scenicId: wharfItem.scenicId,
          wharfName: wharfItem.wharfName,
          wharfCode: wharfItem.wharfCode,
          lat: wharfItem.lat,
          lon: wharfItem.lon,
          isTwoFixedPointsNeed: wharfItem.isTwoFixedPointsNeed,
          toFixedPointsDistance: wharfItem.toFixedPointsDistance,
          heading: wharfItem.heading,
        }

        //如果有电子围栏则先删除已有的电子围栏
        let firstFence = this.fenceItemArr[0];
        if (firstFence) {
          delFence(this.scenic.scenicId, firstFence.fenceId).then(res => {
            this.getFenceList(this.scenic.scenicId).then(res => {
              this.addAllFenceOverlay();

              this.editWharfDialogVisible = true;
            })
          })
        } else {
          this.editWharfDialogVisible = true;
        }
      })
    },
    deleteWharfItem(wharfItem) {
      let scenicId = wharfItem.scenicId;
      this.$modal.confirm("注意：删除码头时会同时删除已有的电子围栏，是否确认删除当前码头？").then(() => {

        //如果有电子围栏则先删除已有的电子围栏
        let firstFence = this.fenceItemArr[0];
        if (firstFence) {
          delFence(this.scenic.scenicId, firstFence.fenceId).then(res => {
            delWharf(wharfItem.scenicId, wharfItem.wharfId).then(res => {
              this.$modal.msgSuccess("码头删除成功");
              this.getAllDataAndInitMap(scenicId);
            })
          })
        } else {
          delWharf(wharfItem.scenicId, wharfItem.wharfId).then(res => {
            this.$modal.msgSuccess("码头删除成功");
            this.getAllDataAndInitMap(scenicId);
          })
        }
      }).catch(err => {

      })
    },
    /**
     * 删除电子围栏。
     * @param fence
     */
    deleteFenceItem(fenceItem) {
      this.$modal.confirm("确认删除当前电子围栏吗？").then(() => {
        console.log("确认删除")
        delFence(fenceItem.scenicId, fenceItem.fenceId).then(res => {
          // console.log("deleteFenceItem res: ", res)

          this.$modal.msgSuccess("电子围栏删除成功");

          this.getFenceList(fenceItem.scenicId).then(res => {
            this.addAllFenceOverlay();
          })

        }).catch(err => {
          console.log("deleteFenceItem err: ", err)

          this.$modal.msgError("删除失败")
        })
      }).catch(() => {
        console.log("取消删除")
      })
    },
    /**
     * 删除自动航线。
     * @param shiplineItem
     */
    deleteShiplineItem(shiplineItem) {
      this.$modal.confirm("确认删除当前航线吗？").then(() => {
        console.log("确认删除")
        delShipline(shiplineItem.scenicId, shiplineItem.shiplineId).then(res => {
          // console.log("deleteShiplineItem res: ", res)

          if (res.code === 200) {
            this.getShipLineList(shiplineItem.scenicId).then(res => {
              this.addAllShiplineOverlay();
            });
          }
          // if (this.map) {
          //   this.map.removeOverlay(shiplineItem.overlay);
          // }
          //
          // this.shiplineItemArr.shift(shiplineItem);

          this.$modal.msgSuccess("删除成功");
        }).catch(err => {
          console.log("deleteShiplineItem err: ", err)

          this.$modal.msgError("删除失败")
        })
      }).catch(() => {
        console.log("取消删除")
      })
    },
    startOrEndDistanceMeasure(e) {
      // console.log("this.$refs.distanceMeasureButton.$el.innerText: ", this.$refs.distanceMeasureButton.$el.innerText)

      if (e.target.innerText === "开启测距") {
        if (this.isDrawing || this.isEditingWharf || this.isEditingShipline || this.isEditingFence) {
          this.$modal.msgWarning("绘制过程中不允许测距！");
          return
        }

        e.target.innerText = "结束测距";
        this.startOrEndDistanceMeasureButtonType = "success"
        console.log("点击开启测距按钮！")

        if (this.distanceMeasure) {
          this.distanceMeasure.open();
        }
      } else if (e.target.innerText === "结束测距") {
        e.target.innerText = "开启测距";
        this.startOrEndDistanceMeasureButtonType = "primary"
        console.log("点击结束测距按钮！")

        if (this.distanceMeasure) {
          this.distanceMeasure.close();
        }
      }
    },
    /**
     * 根据
     * @param startLat
     * @param startLng
     * @param distance
     * @param heading 朝向角度，0~360
     */
    getLatLng_PDH(startLat, startLng, distance, heading) {
      const Earth_Radius = 6378137; //地球半径，单位：米。
      const PI_Constant = 3.1415926; //π的值
      let c = distance / Earth_Radius;
      let a = Math.acos(Math.cos(PI_Constant * (90 - startLat) / 180.0) * Math.cos(c)
        + Math.sin(PI_Constant * (90 - startLat) / 180.0) * Math.sin(c) * Math.cos(PI_Constant * (heading) / 180.0));
      let x = Math.asin(Math.sin(c) * Math.sin(PI_Constant * (heading) / 180.0) / Math.sin(a));
      console.log("getLatLng_PDH: ", c, a, x)

      let resultLat = 90.0 - a * 180.0 / PI_Constant;
      let resultLng = startLng + x * 180.0 / PI_Constant;
      return [resultLat, resultLng];
    },
    modifyWharfCoordinate(wharfItem) {

    },
    modifyHeading(wharfItem) {
      this.$modal.confirm("修改码头泊位朝向会先删除已有的电子围栏，是否确认修改？").then(res => {
        this.modifyHeadingForm = {
          wharfId: wharfItem.wharfId,
          scenicId: wharfItem.scenicId,
          wharfName: wharfItem.wharfName,
          wharfCode: wharfItem.wharfCode,
          lat: wharfItem.lat,
          lon: wharfItem.lon,
          heading: wharfItem.heading,
          toFixedPointsDistance: wharfItem.toFixedPointsDistance
        }

        this.modifyHeadingDialogVisible = true;
      })

    },
    submitModifyHeadingForm() {
      // console.log("submitModifyWharfCodeForm this.modifyHeadingForm: ", this.modifyHeadingForm)

      this.packModifyWharfForm(this.modifyHeadingForm);

      //如果有电子围栏则先删除已有的电子围栏
      let firstFence = this.fenceItemArr[0];
      if (firstFence) {
        delFence(this.scenic.scenicId, firstFence.fenceId).then(res => {
          updateWharf(this.modifyHeadingForm).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess("码头泊位朝向更新成功！")

              this.getAllDataAndInitMap(this.modifyHeadingForm.scenicId)
            } else {
              this.$modal.msgError("码头泊位朝向更新失败！")
            }
          }).catch(err => {
            this.$modal.msgError("码头泊位朝向更新失败！")
          }).finally(() => {
            this.modifyHeadingDialogVisible = false;
          })
        })
      } else {
        updateWharf(this.modifyHeadingForm).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("码头泊位朝向更新成功！")

            this.getAllDataAndInitMap(this.modifyHeadingForm.scenicId)
          } else {
            this.$modal.msgError("码头泊位朝向更新失败！")
          }
        }).catch(err => {
          this.$modal.msgError("码头泊位朝向更新失败！")
        }).finally(() => {
          this.modifyHeadingDialogVisible = false;
        })
      }
    },
    cancelModifyHeading() {
      this.modifyHeadingDialogVisible = false;
    },
    modifyTwoFixedPointsDistance(wharfItem) {
      this.$modal.confirm("修改电子围栏起止点间直线距离会先删除已有的电子围栏，是否确认修改？").then(res => {
        this.modifyTwoFixedPointsDistanceForm = {
          wharfId: wharfItem.wharfId,
          scenicId: wharfItem.scenicId,
          wharfName: wharfItem.wharfName,
          wharfCode: wharfItem.wharfCode,
          lat: wharfItem.lat,
          lon: wharfItem.lon,
          heading: wharfItem.heading,
          toFixedPointsDistance: wharfItem.toFixedPointsDistance
        }

        this.modifyTwoFixedPointsDistanceDialogVisible = true;
      })

    },
    packModifyWharfForm(wharfForm) {
      let wharfLat = wharfForm.lat;
      let wharfLon = wharfForm.lon;
      let distance = wharfForm.toFixedPointsDistance;
      let heading = wharfForm.heading;

      let twoFixedPoint = this.generateFenceTwoFixedPoint(wharfLat, wharfLon, distance, heading);
      let toFixedPointsCoordinatesArr = [];
      let toFixedPointsBdCoordinatesArr = [];

      toFixedPointsCoordinatesArr.push(twoFixedPoint[0].lat);
      toFixedPointsCoordinatesArr.push(twoFixedPoint[0].lng);
      toFixedPointsCoordinatesArr.push(twoFixedPoint[1].lat);
      toFixedPointsCoordinatesArr.push(twoFixedPoint[1].lng);

      toFixedPointsBdCoordinatesArr.push(twoFixedPoint[0].bdLat);
      toFixedPointsBdCoordinatesArr.push(twoFixedPoint[0].bdLng);
      toFixedPointsBdCoordinatesArr.push(twoFixedPoint[1].bdLat);
      toFixedPointsBdCoordinatesArr.push(twoFixedPoint[1].bdLng);

      wharfForm.toFixedPointsCoordinates = toFixedPointsCoordinatesArr.join(",");
      wharfForm.toFixedPointsBdCoordinates = toFixedPointsBdCoordinatesArr.join(",");
    },
    submitModifyTwoFixedPointsDistanceForm() {

      this.packModifyWharfForm(this.modifyTwoFixedPointsDistanceForm);

      //如果有电子围栏则先删除已有的电子围栏
      let firstFence = this.fenceItemArr[0];
      if (firstFence) {
        delFence(this.scenic.scenicId, firstFence.fenceId).then(res => {
          updateWharf(this.modifyTwoFixedPointsDistanceForm).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess("电子围栏起止点间直线距离更新成功！")

              this.getAllDataAndInitMap(this.modifyTwoFixedPointsDistanceForm.scenicId)
            } else {
              this.$modal.msgError("电子围栏起止点间直线距离更新失败！")
            }
          }).catch(err => {
            this.$modal.msgError("电子围栏起止点间直线距离更新失败！")
          }).finally(() => {
            this.modifyTwoFixedPointsDistanceDialogVisible = false;
          })
        })
      } else {
        updateWharf(this.modifyTwoFixedPointsDistanceForm).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("电子围栏起止点间直线距离更新成功！")

            this.getAllDataAndInitMap(this.modifyTwoFixedPointsDistanceForm.scenicId)
          } else {
            this.$modal.msgError("电子围栏起止点间直线距离更新失败！")
          }
        }).catch(err => {
          this.$modal.msgError("电子围栏起止点间直线距离更新失败！")
        }).finally(() => {
          this.modifyTwoFixedPointsDistanceDialogVisible = false;
        })
      }
    },
    cancelModifyTwoFixedPointsDistanceForm() {
      this.modifyTwoFixedPointsDistanceDialogVisible = false;
    },
    submitModifyWharfCodeForm() {
      console.log("submitModifyWharfCodeForm this.modifyWharfCodeForm: ", this.modifyWharfCodeForm)

      updateWharf(this.modifyWharfCodeForm).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("码头编号更新成功！")

          this.getWharfList(this.modifyWharfCodeForm.scenicId);
          this.addAllWharfOverlay();
        } else {
          this.$modal.msgError("码头编号更新失败！")
        }
      }).catch(err => {
        this.$modal.msgError("码头编号更新失败！")
      }).finally(() => {
        this.modifyWharfCodeDialogVisible = false;
      })
    },
    cancelModifyWharfCode() {
      this.modifyWharfCodeDialogVisible = false;
    },

    modifyWharfCode(wharfItem) {
      this.modifyWharfCodeForm = {
        wharfId: wharfItem.wharfId,
        scenicId: wharfItem.scenicId,
        wharfName: wharfItem.wharfName,
        wharfCode: wharfItem.wharfCode,
        lat: wharfItem.lat,
        lon: wharfItem.lon,
      }

      this.modifyWharfCodeDialogVisible = true;
    },
    handleIsTwoFixedPointNeedValueChange(wharfItem) {
      console.log("handleIsTwoFixedPointNeedValueChange wharfItem: ", wharfItem)
      let isTwoFixedPointsNeed = wharfItem.isTwoFixedPointsNeed;

      this.$modal.confirm(`是否${isTwoFixedPointsNeed === 0 ? '取消' : '确定'}固定电子围栏起止点？`).then(res => {
        // if (isTwoFixedPointsNeed) {
        //   this.addFenceTwoFixedPointOverlay();
        // } else {
        //   this.removeFenceTwoFixedPointOverlay();
        // }

        updateWharf({
          wharfId: wharfItem.wharfId,
          wharfCode: wharfItem.wharfCode,
          isTwoFixedPointsNeed,
        }).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("设置成功！")

            this.getAllDataAndInitMap(wharfItem.scenicId);
          }
        }).catch(err => {
          this.$modal.msgError("设置失败！")
        })

      }).catch(err => {
        if (isTwoFixedPointsNeed === 0) {
          wharfItem.isTwoFixedPointsNeed = 1;
        } else {
          wharfItem.isTwoFixedPointsNeed = 0;
        }
      })

    }

  }
}
</script>

<style>
.fence-container {
  --rightWidth: 400px;
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.left {
  position: relative;
  height: calc(100vh - 84px);
  /*width: 100vw;*/
  width: calc(100vw - 200px - var(--rightWidth));
  /*background-color: red;*/
}

.left .map {
  height: 100%;
  width: 100%;
}

.left .bm-control {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 10px;
  left: 3px;
  width: 100%;
  z-index: 100;
  /*background-color: yellow;*/
}

.left .editTypeSelectClass {
  margin-left: 3px;
}

.left .drawStatusChangeCheckboxClass {
  height: 30px;
  /*background: #fff;*/
  margin-left: 10px;
  /*line-height: 30px;*/
  /*padding: 0 10px;*/
  /*border: 1px solid #d8dee5;*/
}

.left .center-title {
  margin: 0 auto;
  text-align: center;
  color: white;
  font-size: 16px;
  font-weight: 700;
  /*background-color: red;*/
}

.left .distanceMeasureButton {
  /*margin-left: auto;*/
}

.left .showCoordinatesCheckboxClass {
  /*position: absolute;*/
  /*top: 0;*/
  /*right: 10px;*/
  height: 30px;
  margin-left: 10px;
  margin-right: 8px;
  /*background-color: red;*/
}

.right {
  height: calc(100vh - 84px);
  /*padding-left: 5px;*/
  /*padding-top: 5px;*/
  /*width: 100px;*/
  background-color: #f8f2f2;
  overflow-y: auto;
}

.el-checkbox__inner {
  width: 16px;
  height: 16px;
}

.el-checkbox__label {
  color: white;
  line-height: 15px;
  font-size: 14px;
}

.el-input--mini .el-input__inner {
  width: 120px;
}

.el_card_class {
  margin: 5px;
  margin-right: 0;
}

.show_title {
  display: flex;
  flex-direction: row;
  /*background-color: yellow;*/
  align-items: center;
}

.show_title .reDrawOrDelete {
  /*background-color: red;*/
  flex-grow: 1;
  text-align: right;
}

.modifyButton {
  padding: 5px 10px;
}

.back_to_center_point {
  position: fixed;
  bottom: 15px;
  left: 850px;
  z-index: 999;
}

.back_to_center_point img {
  width: 36px;
  height: 36px;
  cursor: pointer;
  margin-right: 15px;
}

.line {
  text-align: center;
}

.modifyWharfCoordinateDialogFooter {
  text-align: center;
}


</style>
